<template>
	<view class="home-container">
		<view class="tips-row"><text class="tips">请选择您的身份</text></view>
		<view class="role-staff" @click="handleEnterHome('STUFF')">
			<image class="role-icon" src="../../static/images/user-astronaut.png" mode=""></image>
			<text class="role-name">回收员</text>
		</view>
		<view class="role-user" @click="handleEnterHome('USER')">
			<image class="role-icon" src="../../static/images/user_fill.png" mode=""></image>
			<text class="role-name">用户</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		};
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: '选择角色'
		})
		const role = uni.getStorageSync('ROLE');
		if (role) {
			if(role === 'USER') {
				uni.navigateTo({
					url: '../home/home'
				})
			} else if(role === 'STUFF') {
				uni.navigateTo({
					url: '../login/login'
				})
			}
		}
	},
	methods: {
		// 选择角色进入首页
		handleEnterHome(role) {
			try {
				uni.setStorageSync('ROLE', role);
				this.$store.commit('SET_ROLE', role)
			} catch (e) {
				uni.showToast({
					title: '选择角色失败',
					icon: 'error',
					success: function() {
						uni.navigateTo({
							url: '/index'
						});
					}
				});
			}
			if(role === 'USER') {
				uni.navigateTo({
					url: '/pages/home/home'
				});				
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.home-container {
	height: 100vh;
	background: $cu-bg;
	.tips-row {
		width: 100%;
		height: 24vh;
		line-height: 24vh;
		text-align: center;
		color: $white;
		font-size: 48rpx;
		.tips {
			color: $uni-text-color;
		}
	}
	.role-staff,
	.role-user {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		margin: 0 auto;
	}
	.role-staff {
		background: $primary;
	}
	.role-user {
		margin-top: 120rpx;
		background: $assist;
	}
	.role-icon {
		width: 120rpx;
		height: 120rpx;
		margin-left: 60rpx;
		margin-top: 30rpx;
	}
	.role-name {
		display: block;
		text-align: center;
		color: $white;
	}
}
</style>
